<template>
  <div>
    <Search></Search>
    <GoodsListNav></GoodsListNav>
    <div class="goods-list-container">
      <Alert show-icon class="tips-box">
        小提示
        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
        <template slot="desc">请点击商品前的选择框，选择购物车中的商品，点击付款即可。</template>
      </Alert>
      <Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" @on-selection-change="select"
             no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"></Table>
      <div class="address-container">
        <h3>收货人信息</h3>
        <div class="address-box">
          <div class="address-check">
            <div class="address-check-name">
              <span><Icon type="ios-checkmark-outline"></Icon> {{checkAddress.name}}</span>
            </div>
            <div class="address-detail">
              <p>{{checkAddress.address}}</p>
            </div>
          </div>
          <Collapse>
            <Panel>
              选择地址
              <p slot="content">
                <RadioGroup vertical size="large" @on-change="changeAddress">
                  <Radio :label="item.id" v-for="(item, index) in address" :key="index">
                    <span>{{item.name}} {{item.province}} {{item.city}} {{item.address}} {{item.phone}} {{item.zipCode ? item.zipCode : ''}}</span>
                  </Radio>
                  <span>
                    您还没有添加地址，
                  <router-link to="/home/addAddress" v-if="address.length === 0">点击此处添加地址</router-link></span>
                </RadioGroup>
              </p>
            </Panel>
          </Collapse>
        </div>
      </div>
      <div class="remarks-container">
        <h3>备注</h3>
        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
      </div>
      <div class="invoices-container">
        <h3>发票信息</h3>
        <p>该商品不支持开发票</p>
      </div>
      <div class="pay-container">
        <div class="pay-box">
          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span>
          </p>
          <div class="pay-btn">
            <!--<router-link to="/pay">-->
            <Button @click="handlePostOrder" type="error" size="large" :disabled="infoCompleted">支付订单</Button>
            <!--</router-link>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Search from '@/views/Search';
  import GoodsListNav from '@/views/nav/GoodsListNav';
  import request from '@/utils/request'

  export default {
    name: 'Order',
    beforeRouteEnter(to, from, next) {
      window.scrollTo(0, 0);
      next();
    },
    created() {
      //this.loadAddress();
    },
    data() {
      return {
        goodsCheckList: [],
        columns: [
          {
            type: 'selection',
            width: 58,
            align: 'center'
          },
          {
            title: '图片',
            key: 'imageUrl',
            width: 86,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.imgUrl,
                    style: 'width:100%'
                  }
                })
              ]);
            },
            align: 'center'
          },
          {
            title: '商品信息',
            key: 'info',
            align: 'center'
          },
          {
            title: '单价',
            width: 198,
            key: 'price',
            align: 'center'
          },
          {
            title: '数量',
            key: 'mount',
            width: 68,
            align: 'center'
          },
          {
            title: '金额',
            width: 198,
            key: 'totalPrice',
            align: 'center'
          }
        ],
        checkAddress: {
          name: '未选择',
          address: '请选择地址',
          id: -1
        },
        remarks: ''
      };
    },
    computed: {
      shoppingCart() {
        const cart = []
        const shoppingCartList = this.$store.getters.shoppingCartList
        if (shoppingCartList) {

          shoppingCartList.forEach(item => {
            let cartItem = {}
            cartItem.shoppingCartId = item.bookInfo.id
            cartItem.bookId = item.bookId
            cartItem.storeId = item.bookInfo.storeId
            cartItem.mount = item.count
            cartItem.price = item.bookInfo.price
            cartItem.bookName = item.bookInfo.name
            cartItem.info = `${item.bookInfo.name} ${item.bookInfo.packStyle}`
            cartItem.imgUrl = item.bookInfo.imageUrl
            cartItem.totalPrice = cartItem.mount * cartItem.price
            cart.push(cartItem)
          })
        }
        return cart
      },

      address() {
        return this.$store.getters.address
      },
      infoCompleted() {
        return this.checkAddress.id === -1 || this.goodsCheckList.length === 0
      },
      totalPrice() {
        let price = 0;
        this.goodsCheckList.forEach(item => {
          price += item.price * item.mount;
        });
        return price;
      }
    },
    methods: {
      handlePostOrder() {
        let data = {
          userId: this.$store.getters.userInfo.id,
          addressId: this.checkAddress.id,
          detail: this.goodsCheckList,
          message: this.remarks
        }

        request.post('/order/create', data).then(response => {
          this.$store.dispatch('setNewLastOrderId', response.data.data)
          this.$router.push('/pay')
        }).catch(error => {
          this.$Message.error(error)
        })
      },
      select(selection, row) {
        console.log(selection);
        this.goodsCheckList = selection;
      },
      changeAddress(data) {
        const father = this;
        this.address.forEach(item => {
          if (item.id === data) {
            father.checkAddress.name = item.name;
            father.checkAddress.address = `${item.name} ${item.province} ${item.city} ${item.address} ${item.phone} ${item.zipCode}`;
            father.checkAddress.id = item.id
          }
        });
      }
    },
    mounted() {
      setTimeout(() => {
        this.$refs.selection.selectAll(true);
      }, 500);
    },
    components: {
      Search,
      GoodsListNav
    },
  };
</script>

<style scoped>
  .goods-list-container {
    margin: 15px auto;
    width: 80%;
  }

  .tips-box {
    margin-bottom: 15px;
  }

  .address-container {
    margin-top: 15px;
  }

  .address-box {
    margin-top: 15px;
    padding: 15px;
    border: 1px #ccc dotted;
  }

  .address-check {
    margin: 15px 0px;
    height: 36px;
    display: flex;
    align-items: center;
  }

  .address-check-name {
    width: 120px;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: #ccc;
  }

  .address-check-name span {
    width: 120px;
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    background-color: #f90013;
  }

  .address-detail {
    padding-left: 15px;
    font-size: 14px;
    color: #999999;
  }

  .remarks-container {
    margin: 15px 0px;
  }

  .remarks-input {
    margin-top: 15px;
  }

  .invoices-container p {
    font-size: 12px;
    line-height: 30px;
    color: #999;
  }

  .pay-container {
    margin: 15px;
    display: flex;
    justify-content: flex-end;
  }

  .pay-box {
    font-size: 18px;
    font-weight: bolder;
    color: #495060;
  }

  .money {
    font-size: 26px;
    color: #f90013;
  }

  .pay-btn {
    margin: 15px 0px;
    display: flex;
    justify-content: flex-end;
  }
</style>
